<template>
  <div>
    <el-dialog
      v-model="props.isShow"
      :title="props.isAdd ? '添加' : '编辑'"
      center
      :before-close="cancel"
    >
      <el-form ref="userRef" :model="userForm" :rules="rules">
        <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
          <el-select placeholder="请选择" v-model="userForm.roleid">
            <el-option
              v-for="item in store.getters['role/getRole']"
              :label="item.rolename"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
          <el-input autocomplete="off" v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="userForm.password" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-tooltip :content="'Switch value: ' + value" placement="top">
            <el-switch
              v-model="userForm.status"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"
              :active-value="1"
              :inactive-value="2"
            />
          </el-tooltip>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel(userRef)">取消</el-button>
          <el-button type="primary" @click="confirm(userRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, defineEmits } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex";
import { useradd, userinfo, useredit } from "../../request/api";
import { ElMessage } from "element-plus";
let store = useStore();

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const value = ref("1");
const userForm = ref({
  roleid: "", //角色编号
  username: "", //管理员名称
  password: "", //密码
  status: 1, //状态  1正常2禁用
});
const rules = {
  username: [
    {
      required: true,
      message: "请输入管理员名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 8,
      message: "长度在 2 到 8 个字符",
      trigger: "blur",
    },
  ],
  roleid: [{ required: true, message: "请选择所属管理员", trigger: "change" }],
};
const props = defineProps({
  isShow: Boolean,
  isAdd: Boolean,
});
let emit = defineEmits(["cancel"]);
let userRef = ref<FormInstance>();
// 调用role仓库
store.dispatch("role/getRoleActions");
// 取消
const cancel = (formEl?: FormInstance | undefined) => {
  emit("cancel");
  userForm.value = {
    roleid: "", //角色编号
    username: "", //管理员名称
    password: "", //密码
    status: 1, //状态  1正常2禁用
  };
  if (!formEl) return;
};
const lookup = async (uid: number) => {
  let result: any = await userinfo({ uid });
  // console.log(result);
  userForm.value = result.list;
  // 密码为空则不修改
  userForm.value.password = "";
  userForm.value.uid = uid;
};

const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((val) => {
    if (val) {
      if (props.isAdd) {
        // 添加
        // console.log(roleForm.value);
        useradd(userForm.value).then((res) => {
          //   console.log(userForm.value);
          //   console.log(res);
          if (res.code == 200) {
            // 成功 提示
            ElMessage.success(res.msg);
            // 成功-关闭弹窗
            cancel();
            store.dispatch("user/getUserActions");
          } else {
            ElMessage.error(res.msg);
          }
        });
      } else {
        // 编辑
        useredit(userForm.value).then((res) => {
          //   console.log(userForm.value);
          //   console.log(res);
          if (res.code == 200) {
            // 成功 提示
            ElMessage.success(res.msg);
            // 成功-关闭弹窗
            cancel();
            store.dispatch("user/getUserActions");
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    }
  });
};
// 可以通过defineExpose 编译器宏来显示指定在 <script setup> 组件中要暴露出去的属性
defineExpose({
  lookup,
});
</script>

<style lang="less" scoped></style>
